<template>
    <div class="main main_bg">
      <div class="head">
        <div class="container">
        <div class="db">
          <div class="name flex text-overflow" @click="link('member/myinfo')"><img :src="userData.userData.avatar" alt="">{{userData.userData.nickname}}</div>
          <div class="str rel">
            <img src="../assets/images/set/ico_xx.png" alt=""> <span class="abs"></span>
          </div>
        </div>
        </div>
      </div>

      <div class="container">
        <div class="nk_box db boxshadow">
          <div class="flex">
            <div class="uid">UID:{{userData.userData.userId}} <img src="../assets/images/set/ico_copy.png" alt="" v-clipboard:copy="userData.userData.userId" v-clipboard:success="onCopy"></div>
            <div class="dj"><img src="../assets/images/set/ico_dj.png" alt="">社区等级：X1(下一级X2)</div>
          </div>
          <div class="str" @click="link('/member/userQrcode')">
            <img src="../assets/images/set/ico_add_hy.png" alt=""><span>邀请好友</span>
          </div>
        </div>

        <div class="it boxshadow">
          <!--<div class="db" @click="link('member/tab_accout')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_tab_access.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">切换账号</div>-->
              <!--<p class="c-999">多账号随时切换，一秒切换无需退出登陆</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_bi_address.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">提币地址</div>-->
              <!--<p class="c-999">保存提币地址，去除繁琐提币流程</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_aqsz.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">安全设置</div>-->
              <!--<p class="c-999">定时修改交易密码让你的账户更加安全</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db" @click="link('staff/index')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">员工团队</div>-->
              <!--<p class="c-999">有什么不懂的可以点这里点这里</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db" @click="link('doc/kj')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">砍价</div>-->
              <!--<p class="c-999">有什么不懂的可以点这里点这里</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
           <!--<div class="db" @click="link('profit')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">理财计算器</div>-->
              <!--<p class="c-999">有什么不懂的可以点这里点这里</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db" @click="link('minerprofit')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">矿机计算器</div>-->
              <!--<p class="c-999">有什么不懂的可以点这里点这里</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db" @click="link('agent/index')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">晋升代理</div>-->
              <!--<p class="c-999">有什么不懂的可以点这里点这里</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <div class="db" @click="link('member/paylist')">
            <div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>
            <div class="flex">
              <div class="name">充币通道</div>
              <p class="c-999">有什么不懂的可以点这里点这里</p>
            </div>
            <div class="link">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="db" @click="link('member/my_grade')">
            <div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>
            <div class="flex">
              <div class="name">我的等级</div>
              <p class="c-999">有什么不懂的可以点这里点这里</p>
            </div>
            <div class="link">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="db" @click="link('income/index')">
            <div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>
            <div class="flex">
              <div class="name">收益中心</div>
              <p class="c-999">有什么不懂的可以点这里点这里</p>
            </div>
            <div class="link">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="db" @click="link('member/help')">
            <div class="ico"><img src="../assets/images/set/ico_help.png" alt=""></div>
            <div class="flex">
              <div class="name">帮助中心</div>
              <p class="c-999">有什么不懂的可以点这里点这里</p>
            </div>
            <div class="link">
              <van-icon name="arrow" />
            </div>
          </div>
          <!--<div class="db" @click="link('kefu')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_kf.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">联系客服</div>-->
              <!--<p class="c-999">帮助中心解决不了的事情可以点这里</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db" @click="link('member/feedback')">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_feedback.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">意见反馈</div>-->
              <!--<p class="c-999">有任何产品建议或者服务建议都可以反馈</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db" @click="OS_A = true">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_zxzh.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">注销账号</div>-->
              <!--<p class="c-999">一键注销账号，销毁账号信息，保留隐私</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="db">-->
            <!--<div class="ico"><img src="../assets/images/set/ico_del.png" alt=""></div>-->
            <!--<div class="flex">-->
              <!--<div class="name">清除缓存</div>-->
              <!--<p class="c-999">清除APP保留的缓存信息，同时会清除切换账号的缓存</p>-->
            <!--</div>-->
            <!--<div class="link">-->
              <!--<van-icon name="arrow" />-->
            <!--</div>-->
          <!--</div>-->
          <div class="db" @click="link('member/set_lang')">
            <div class="ico"><img src="../assets/images/set/ico_tab_lang.png" alt=""></div>
            <div class="flex">
              <div class="name">切换语言</div>
              <p class="c-999">使用起来一目了然，更简单明了</p>
            </div>
            <div class="link">
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="db" @click="link('member/about')">
            <div class="ico"><img src="../assets/images/set/ico_about.png" alt=""></div>
            <div class="flex">
              <div class="name">关于我们</div>
              <p class="c-999">更加深入的了解我们</p>
            </div>
            <div class="link">
              <van-icon name="arrow" />
            </div>
          </div>

        </div>


        <div class="layout boxshadow tac" @click="logout">
          退出登录
        </div>
      </div>



      <van-popup v-model="OS_A" style="background: none;">
        <div class="os_box">
          <div class="dialag_box db">
            <div class="flex">
              <div class="container bg-fff">
                <div class="name tac">注销账号</div>
                <div class="con">
                  注销账号后，在平台上账号/密码/ 资产等个人资料将被删除，将无法 登录。
                  <span>您确定要注销此账号？</span>
                </div>
                <div class="b db">
                  <div class="flex">
                    <button @click="OS_A = false">取消</button>
                  </div>
                  <div class="flex">
                    <button class="btn">确定</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>



      <div class="h100"></div>
       <bottom_nav :activeTitle="activeTitle"></bottom_nav>

    </div>
</template>
<script>
export default {
  data(){
    return {
      is_line:false,
      activeTitle: this.$t('title.set'),
      OS_A:false,
      userData:this.$store.state
    }
  },

    components: {
    },
    created() {

    },
    computed: {

    },
    mounted() {
    },
    methods: {
      onCopy: function() {
        this.$toast(this.$t('toast.copy_success'));
      },
      link(url){
        this.$router.push({
          path: url,
        });
      },

      logout() {
        this.$post(this.URL.user.logout, {}).then(res => {
          if (res.code == 0) {
            this.resetVuex();
            this.$router.replace("/user/login");
            this.$toast.success(this.$t('set.logout_done'));
          } else {
            this.$toast(res.message);
          }
        });
      }
    }

}

</script>


<style lang="less" scoped>
  .main {
    padding-top: 1rem;
  }
  .head {
    background: #fff;
    z-index: 10;
    position: fixed;top:0;left:0;
    width: 100%;
    padding: .15rem 0;
    .flex {
      font-size: .32rem;
      font-weight: 400;
      color: #333333;
      img {
        height: .5rem;
        width: .5rem;border-radius: 50%;
        margin-right: .15rem;
      }
    }
    .str {
      span {
        display: block;
        width: .12rem;
        height: .12rem;
        border-radius: 50%;
        background: #f64b31;
        top:-.04rem;
        right: -.04rem;
      }
      img {
        height: .4rem;
      }
    }
  }

  .nk_box {
    padding: .34rem;
    .uid {
      font-size: .34rem;
      color: #333333;
      line-height: .34rem;
      height: .34rem;
      font-weight: bold;
      img {
        height: .28rem;
        vertical-align: 0;
      }
    }
    .dj {
      font-size: .26rem;
      font-weight: 400;
      color: #666666;
      margin-top: .2rem;
      img {
        height: .38rem;
        margin-right: .1rem;
      }
    }
    .str {
      img {
        height: .5rem;
      }
      text-align: center;
      font-size: .24rem;
      font-weight: 400;
      color: #666666;
      span {
        display: block;
        margin-top: .06rem;
      }
    }
  }
  .it {
    .db {
      border-bottom: .02rem solid #f3f3f3;
      padding: .3rem .34rem;
      .ico {
        img {
          height: .48rem;
        }
      }
      .flex {
        padding: 0 .33rem;
        .name {
          font-size: .28rem;
          font-weight: 400;
          color: #333333;
        }
        p {
          font-size: .22rem;
        }
      }
      .link {
        i {
          font-size: .32rem;
          color: #666;
        }
      }
    }
  }
  .layout {
    height: .9rem;
    font-size: .32rem;
    font-weight: 400;
    color: #f95657;
    line-height: .9rem;
  }
</style>
